<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>黄金价格计算器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <style>
        body {
            background-color: #f5f5f5;
        }
        #app {
            background-color: #fff;
            width: 400px;
            margin: 10px auto;
            padding: 20px;
            box-shadow: 0 0 10px 1px #999;
        }
        label {
            font-size: 20px;
        }
        input {
            height: 35px;
            margin: 10px;
            border: 2px solid #999;
            border-radius: 3px;
            padding: 0 10px;
            outline: none;
            font-size: 16px;
        }
        span {
            color: red;
            font-weight: 600;
        }
        p {
            font-size: 18px;
            line-height: 45px;
            color: #666;
        }
        i {
            color: blue;
        }
    </style>
</head>
<body>
    <div id='app'>
        <h3 align='center'>黄金价格计算器</h3>
        <label>买入单价：</label>
        <input v-model.number="buyPrice" type="number">
        <span>元/克</span> <br>
        <label>卖出单价：</label>
        <input v-model.number="sellPrice" type="number">
        <span>元/克</span> <br>
        <label>手续费率：</label>
        <input v-model.number="feeRate" type="number" value="0.3">
        <span>%</span> <br>
        <label>购买数量：</label>
        <input v-model.number="quantity" type="number">
        <span>克</span> <br>
        <hr>
        <p>
            成本价： <i>{{ costPrice }}</i> <br>
            卖出价：<i>{{ sellPrice * quantity }}</i><br>
            手续费：<i>{{ fee }}</i><br>
            赎回获得：<i>{{ redeem }}</i><br>
            净收入：<i>{{ netIncome }}</i>
        </p>
		<hr>
		人民币：<input type="number" v-model.number="cny"/> <br>
		<b>美元：</b><span>{{ dollar }}</span><br>
		<b>欧元：</b><span>{{ euro }}</span><br>
		<b>日元：</b><span>{{ yen }}</span><br>
		<b>韩元：</b><span>{{ won }}</span><br>
    </div>
    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
					cny: '', //人民币
					dollar: '', //美元
					euro: '', //欧元
					yen: '', //日元
					won: '', //韩元
                    buyPrice: 0,
                    sellPrice: 0,
                    feeRate: 0.3,
                    quantity: 0
                };
            },
			watch:{//监听熟悉
				cny(newValue,oldValue){//监听人民币变化，更新其他币种
					this.dollar=(newValue*0.1382).toFixed(2)//美元
					this.euro = (newValue * 0.1266).toFixed(2); // 欧元
					this.yen = (newValue * 20.6596).toFixed(2); // 日元
					this.won = (newValue * 188.54).toFixed(2); // 韩元
				}
			},
            computed: {
                costPrice() {
                    return (this.buyPrice * this.quantity).toFixed(2);
                },
                fee() {
                    return (this.buyPrice * this.quantity * this.feeRate / 100).toFixed(2);
                },
                redeem() {
                    return (this.sellPrice * this.quantity).toFixed(2);
                },
                netIncome() {
                    return (this.redeem - this.costPrice - this.fee).toFixed(2);
                }
            }
        }).mount('#app');
    </script>
</body>
</html>